'use strict';
import {createElement, Component,render} from 'rax';
import {View,Image,Text,Link} from 'nuke';
import styles from './index.less';
class SingleImage extends Component {
	constructor() {
		super();
		this.state={
			width:"",
			height:"",
		}
	}
	onLoad(img){
		let width = img.size.naturalWidth;
		let height = img.size.naturalHeight;
			height = (750*height)/width;
			width = 750;
		this.setState({width:width+"rem",height:height+"rem"});
	}
    render() {
		let myText = "";
		let myImage = "";
		if(this.props.text){
			myText = <View style={{width:"750rem",fontSize:"28rem",paddingLeft:"5rem",marginTop:"-48rem",opacity: "0.8",backgroundColor:"rgb(102, 102, 102)"}}>
						<Text style={{
							  fontSize: 28,
							  textOverflow: 'ellipsis',
							  overflow: 'hidden',
							  color: '#FFFFFF',
							  lineHeight: 48,
							  height: 48
							}}>
							{this.props.text}
							</Text>
					 </View>
		}
		if(this.props.link){
			myImage = <Link href={this.props.link}>
						<Image src={this.props.pic} style={{width:this.state.width,height:this.state.height}} onLoad={this.onLoad.bind(this)}/>
					  </Link>;
		}else{
			myImage = <Image src={this.props.pic} style={{width:this.state.width,height:this.state.height}} onLoad={this.onLoad.bind(this)}/>;
		}
        return (
			<View  style={{width:this.state.width,height:this.state.height}} >
				{myImage}
				{myText}
			</View>
        );
    }
}

export default SingleImage;
